<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>

</head>

<body>
    <!-- 
        收集表单数据：
            <input type='text'/>则v-model收集的是value值，用户输入的就是value值
            <input type='radio'/>则v-model收集的是value值，且要给标签配置value值
            <input type='checkbox'/>
                1、没有配置input的value属性，收集的就是checked（布尔值）
                2、配置input的value属性：
                    （1）v-model的初始值是非数组，那么收集的就是checked
                    （2）v-model的初始值是数组，那么收集的就是value组成的数组
            v-model的三个修饰符：   
                lazy：失去焦点再收集数据
                number：输入字符串转为有效数字
                trim:输入首尾空格过滤

     -->
    <div id="root">
        <form @submit.prevent="demo">
            账号：
            <input type='text' v-model.trim='userInfo.account'/><br />
            密码：
            <input type='password' v-model.trim='userInfo.damin'/><br />
            年龄：
            <input type='number' v-model.number='userInfo.age'/><br/>
            性别：
            男<input type="radio" name='sex' v-model="userInfo.sex" value="male">
            女<input type="radio" name='sex' v-model="userInfo.sex" value="female"><br />
            爱好：
            sing<input type='checkbox' v-model="userInfo.sing" value='sing' />
            dance<input type='checkbox' v-model="userInfo.dance" value='dance' />
            rap<input type='checkbox' v-model="userInfo.rap" value='rap' /><br />
            所属省份：
            <select v-model="userInfo.cities">
                <option value="chongqing">重庆</option>
                <option value="shandong">山东</option>
                <option value="beijing">北京</option>
                <option value="guangzhou">广州</option>
                <option value="hebei">河北</option>
            </select>
            <br />
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea>
            <br />
            <input type="checkbox" v-model="userInfo.agree"> 阅读并接受 <a href="">《用户协议》</a>
            <button>点击提交</button>
        </form>

    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#root',
            data: {
                userInfo: {
                    account: '',
                    admin: '',
                    age:18,
                    sex: 'male',
                    hobby: [],
                    cities: 'guangzhou',
                    other: '其他信息',
                    agree: false
                }
            },
            methods: {
                demo() {
                    alert(JSON.stringify(this.userInfo))
                }
            }

        })
    </script>
</body>

</html>

<!-- 38 -->